﻿@page "/footers"

<h3>Footer 页脚组件</h3>

<h4>显示在网页的最下方，提供返回顶端按钮</h4>

<p><code>Footer</code> 组件使用时注意样式表 <code>position</code> 属性的设置</p>

<Block Title="基础用法" Introduction="传递滚动条组件的 ID 给页脚组件">
    <div id="scroll" class="overflow-auto border border-secondary p-3" style="max-height: 180px; border-radius: 4px; position: relative;">
        <div style="height: 200px">
            <p>底部显示 Footer 组件，点击返回顶端时页面自动滚动回顶端</p>
            <p>本示例传递的是组件客户端 ID</p>
        </div>
        <Footer Text="Bootstrap Blazor" Target="#scroll" style="margin: -1rem;" />
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
